<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/ArticleTemplate/ArticleStyle.css ">
    <script src="/js/axios.js"></script>

</head>
<body>

<!--顶部布局-->
<div id="articleTop">
    <!--顶部布局第一行-->
    <div id="articleTop_one">
        <div class="articleTop_onLeft">
            您好！admin,欢迎来到会员中心!【会员中心】【短消息0】【退出】
        </div>
        <div class="articleTop_oneRight">
            设为首页&nbsp;加入收藏&nbsp;网站地图
        </div>
    </div>
    <!--顶部布局第一行结束-->
    <div style="clear:both"></div>
    <!--顶部布局第二行开始-->
    <div id="articleTop_two">
        <div class="articleTopImg">
            <img src="/ArticleTemplate/images/logo.gif" style="height:100px">
        </div>
        <div class="articleTopSearch">
            <input type="text" id="txtSearch" />
            <input type="button" value="搜索" id="txtBtnSearch" />
        </div>
    </div>
    <!--顶部布局第二行结束-->
    <div style="clear:both"></div>
    <!--导航条布局-->
    <div id="articleNav">
        <ul>
            <li><a href="javascript:void(0)">首页</a></li>
            <li><a href="javascript:void(0)">新闻频道</a></li>
            <li><a href="javascript:void(0)">图片频道</a></li>
            <li><a href="javascript:void(0)">下载频道</a></li>
        </ul>
    </div>
    <!--导航条布局结束-->
</div>
<!--顶部布局结束-->
<!--中间内容开始-->
<div id="articleContent">
    <div id="articleContent_left">
        <div id="articleContent_leftTop">
            您当前位置：
            <a href="javascript:void(0)">CMS</a> >>
            <a href="javascript:void(0)">新闻频道</a> >>
            <a href="javascript:void(0)">&#21457;&#26031;&#33922;&#33452;</a> >>
            <a href="javascript:void(0)">浏览文章</a>
        </div>
        <div id="articleContent_leftBottom">
            <h2>&#21457;&#26031;&#33922;&#33452;</h2>
            <div class="articleTop"><span>时间: </span><span>信息来源:&#38463;&#26031;&#33922;&#33452;</span>点击:<span id="changes"></span> <span>【收藏此文】【字体：大 中 小】</span></div>
            <div id="splitLine"></div>
            &lt;p&gt;
	&#38463;&#36947;&#22827;&lt;/p&gt;


            <!-------相关新闻------->
            <div id="articleContent_Same">
                <div class="articleContent_SameNew">相关新闻</div>
                <ul id="likeNewList">
                </ul>
            </div>
            <!-------相关新闻结束------->
            <br />
            <!----------评论展示----------------->
            <div id="articleComment">
                <div id="articleComment_top">
                    <span style="font-size:20px;font-weight:bolder;display:block"> 我有话说</span>

                    <span> 以下是对 <strong>[&#21457;&#26031;&#33922;&#33452;]</strong> 的评论,总共:1条评论</span>
                </div>
                <div id="articleComment_middle">
                    <ul id="articleCommentList">
                    </ul>
                </div>
                <div id="articleComment_bottom">
                    <textarea style="font-size:14px;padding:5px;width:90%;height:90px;overflow:auto;" placeholder="文明上网，请对您的发言负责" id="commentMsg"></textarea>
                    <input type="button" id="btnComment" style="float:right" value="发布评论" class="reply_btn" />
                </div>

            </div>
            <!----------评论展示结束----------------->
        </div>

    </div>
    <!---中间内容右侧布局---->
    <div id="articleContent_right">
        <div id="hotArticle">
            <div class="newArticle_Title">
                <h3><span>最</span>新文章</h3>
            </div>
            <div id="newArticle_Content">
                <ul class="showUl">
                    <li>
                        <span class="spanData">1</span>
                        <a href="javascript:void(0)">
                            <span style="color:green">[图文]</span>
                            啊啊啊啊
                        </a>
                        <span style="float:right"><img class="showImage" src="/ArticleTemplate/images/logo.gif"></span>
                        <p style="padding-left:20px">啊啊啊啊......</p>
                    </li>
                    <li>
                        <span class="spanData">2</span>
                        <a href="javascript:void(0)">
                            <span style="color:green">[图文]</span>
                            啊啊啊啊
                        </a>
                        <span style="float:right"><img class="showImage" src="/ArticleTemplate/images/logo.gif"></span>
                        <p style="padding-left:20px">啊啊啊啊......</p>
                    </li>
                    <li>
                        <span class="spanData">3</span>
                        <a href="javascript:void(0)">
                            <span style="color:green">[图文]</span>
                            啊啊啊啊
                        </a>
                        <span style="float:right"><img class="showImage" src="/ArticleTemplate/images/logo.gif"></span>
                        <p style="padding-left:20px">啊啊啊啊......</p>
                    </li>
                </ul>

            </div>

        </div>
    </div>
    <!---中间内容右侧布局结束---->
</div>

<!--中间内容结束-->
<div id="articleBottom">

    <div id="about">
        <a href="javascript:void(0)">关于我们</a>
        <a href="javascript:void(0)">联系我们</a>
        <a href="javascript:void(0)">法律声明</a>
        <a href="javascript:void(0)">人才招聘</a>
        <a href="javascript:void(0)">免责声明</a>
        <a href="javascript:void(0)">网站地图</a>
        <a href="javascript:void(0)">友情链接</a>

    </div>

</div>

<script>




    /* END EXTERNAL SOURCE */
    /* BEGIN EXTERNAL SOURCE */

    const btnComment = document.querySelector("#btnComment");
    const commentMsg = document.querySelector("#commentMsg");
    const articleCommentList = document.querySelector("#articleCommentList");
    btnComment.addEventListener("click", function () {
        if (commentMsg.value === "") {
            alert("评论内容不能为空!!");
            return;
        }
        const data = {
            Msg : commentMsg.value,
            articleId: 11
        }
        axios({
            method: "post",
            url: "/article/addArticleComment",
            data
        }).then(function ({ data:res }) {
            if (res.code === 200) {
                // 加载评论
                loadComments();
            } else {
                alert(res.msg);
            }
        })
    })

    function loadComments() {
        axios({
            method: "get",
            url: "/article/GetArticleComments?articleId=" + 11,

        }).then(function ({ data: res }) {
            if (res.code === 200) {
                articleCommentList.innerHTML = res.data.map(item => `
                        <li>
                        ${item.createdDate}:${item.msg}
                        </li>

                    `).join('');
            }
        })
    }
    loadComments();

    //获取访问次数
    function getArticleHits() {
        axios({
            method: "get",
            url: "/article/getArticleHits?articleId=" + 11
        }).then(function ({data:res }) {
            if (res.code === 200) {
                const changes = document.querySelector("#changes");
                changes.innerHTML = res.hits;
            }
        })
    }
    getArticleHits();
</script>
</body>
</html>


